import path from 'path';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import vitePluginInfo from './vite-plugins/vite-plugin-info.mjs';

export default defineConfig(({ command, mode }) => {
	console.log('command', command);
	console.log('mode', mode);
	return {
		mode: 'play',//指定项目运行的模式,对开发和生产环境都生效
		base: '/web/',//公共基础路径。
		publicDir: './public',//指定作为静态资源服务的文件夹	
		// 构建配置
		build: {
			outDir: 'dist-vue3',// 存放打包文件的目录
			assetsDir: 'static',// 存放静态资源的目录
			sourcemap: false,// 生成源映射文件,默认 false
			chunkSizeWarningLimit: 1024,//打包文件大小警告阈值
			minify: true, //是否开启代码压缩	
			cssMinify: true,//此选项允许用户覆盖 CSS 最小化压缩的配置，而不是使用默认的 build.minify
			target: 'ESNext',// 指定目标ECMAScript版本
			//设置资源内联为 base64的阈值
			assetsInlineLimit: (filePath: string, content: Buffer) => {
				//返回true则将资源内联为 base64,否则不内联	
				return content.byteLength < 0;
			},
			// rollup 中被多处引入的局部注册组件会自动被提取成单独的文件
			rollupOptions: {
				// 自定义输出目录结构和分包,优先级高于 assetsDir 属性
				output: {
					//规定入口文件的输出路径和命名格式。
					// entryFileNames: 'js/entry.[name].[hash].js',
					entryFileNames: (chunkInfo) => {
						// console.log('chunkInfo', chunkInfo);
						return `js/chunk.[name].[hash].js`;
					},
					//规定代码拆分后的输出文件命名格式。
					// chunkFileNames: 'js/chunk.[name].[hash].js',
					chunkFileNames: (assetInfo) => {
						// console.log('chunkFileNames', assetInfo);
						return `js/chunk.[name].[hash].js`;
					},
					//自定义所有非 JS 文件的输出路径和命名规则。
					assetFileNames: (assetInfo) => {
						let extType: string = '';
						extType = assetInfo.names[0].split('.').pop() || '';
						if (extType === 'css') {
							return 'css/[name].[hash][extname]';
						}
						const imgTypes = ['png', 'jpg', 'jpeg', 'gif', 'svg'];
						if (imgTypes.includes(extType)) {
							return 'images/[name].[hash][extname]';
						}
						return 'assets/[name].[hash][extname]';
					},
					// 手动进行代码分包,返回的文件名为 chunkFileNames 字段的[name]
					manualChunks(id) {
						//id: 模块的绝对路径
						if (id.includes('node_modules')) {
							// 分包的文件名,所有符合条件的模块会被打包到node_modules.js文件中
							return 'node_modules';
							// return id.split('/').pop()?.split('.').shift();
						}

					}
				}
			}
		},
		// esbuild配置
		esbuild: {
			//build模式下删除console和debugger
			drop: command === 'build' ? ['console', 'debugger'] : []
		},
		// plugins 用于定义 Vite 的插件。
		plugins: [
			vue(),
			vitePluginInfo({ author: 'hyx' }),
		],
		// 路径别名配置
		resolve: {
			alias: {
				'@': path.resolve(import.meta.dirname, 'src')
			},
		},
		//开发服务器配置
		server: {
			port: 666, //vite项目启动时自定义端口
			host: '0.0.0.0',//监听所有地址
			hmr: true,//是否开启热更新
			open: false,//是否自动打开浏览器
			corse: true,//为开发服务器配置 CORS。传递一个 选项对象(https://github.com/expressjs/cors#configuration-options) 来调整行为，或设置为 true 来允许任何源。默认为 本地IP 和 https协议地址
			allowedHosts: ['localhost'],//允许响应的主机名(host字段)。 默认允许 localhost 及其下的所有 .localhost 域名和所有 IP 地址。 使用 HTTPS 时，将跳过此检查。如果设置为 true，服务器将被允许响应任何主机的请求。
			headers: {//设置响应给浏览器的头,只对开发服务器直接处理的静态资源请求有效
				'X-Custom-To-Browser': 'Custom-Header'
			},
			//代理服务器配置
			proxy: {
				'^/api': {
					target: 'https://api.com',
					//将主机标头的来源更改为目标 URL
					changeOrigin: true,
					//配置转发出去的请求的请求头,只对代理的请求有效
					headers: {
						'Custom-To-Server': 'Custom-Header'
					},
					//路径重写
					rewrite: (_) => _.replace(/^\/api/, ''),
					//是否添加x-forward标头
					xfwd: true,
					//转发配置
					configure: (proxy, _options) => {
						//这里也可以配置转发出去的请求的请求头
						proxy.on('proxyReq', function (proxyReq, req, res) {
							const proxyReqHeaders = proxyReq.getHeaders();
							const originHeaders = req.headers;
							proxyReq.removeHeader('Custom-To-Server');
							proxyReq.setHeader('proxy-to-server', 'Proxy-Header');
							const newProxyReqHeaders = proxyReq.getHeaders();
						});
						//这里可以配置代理后响应给浏览器的响应头
						proxy.on('proxyRes', (proxyRes, req, res) => {
							const proxyResHeaders = { ...proxyRes.headers };
							const originHeaders = { ...req.headers };
							//操作返回给浏览器原请求的响应头
							proxyRes.headers["Proxy-To-Browser"] = "Proxy-Header";
							proxyRes.headers["Proxy-To-Delete"] = "Delete-Header";
							delete proxyRes.headers['Proxy-To-Delete'];
							const newProxyResHeaders = { ...proxyRes.headers };
						});
					}
				},
			}
		},
		// 依赖预构建仅适用于开发模式，并使用 esbuild 将依赖项转换为 ES 模块。
		// 目的1: Vite 的开发服务器将所有代码视为原生 ES 模块,必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。
		// 目的2: 将那些具有许多内部模块的 ESM 依赖项转换为单个模块, 减少网络请求次数。
		// 默认情况下， node_modules 中的包会被预构建。
		optimizeDeps: {
			// 在预构建中强制排除的依赖项。 esm-dep:包名。
			exclude: ['esm-dep'],//强制排除被包含的 cjs-dep 依赖。
			// 在预构建中强制包含的依赖项。esm-dep:包名。
			include: ['esm-dep > cjs-dep', 'my-lib/components/**/*.vue'],//强制包含被排除的 esm-dep 依赖中的 cjs-dep 这个子依赖。
			// 设置为 true 可以强制依赖预构建，而忽略之前已经缓存过的、已经优化过的依赖。
			force: false,
		}
	};
});
